<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta charset="gbk" />
    <title>JQuery JSONView</title>
    <link rel="stylesheet" href="../s/jquery.jsonview.css" />
    <script type="text/javascript" src="../s/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="../s/jquery.jsonview.js"></script>
    <script type="text/javascript">
 

		/* 模拟数据 */
        var json2 = %s
 
		/* 模拟数据 */
		var json3 = {"id": {"first":1, "second":2, "third":3, "fourth": [4, 5, 6, 7], "fifth": 5}, "name": {"ZS": "张三", "LS": "李四"}};
 
		var flag = false;
 
		$(function() {
			/* JSONView第一个参数就是需要转换的json数据 */
			$("#json").JSONView(json2, {collapsed: false, nl2br: true, recursive_collapser: true });
		});
 
 
		function expand() {
			$("#json").JSONView(json2, {collapsed: false, nl2br: true, recursive_collapser: true });
			flag = false;
		};
 
		function collapse() {
			$("#json").JSONView(json2, {collapsed: true, nl2br: true, recursive_collapser: true });
			flag = true;
		};
 
		function tog() {
			if(flag == false) {
				collapse();
				flag = true;
			} else {
				expand();
				flag = false;
			}
		};
    </script>
</head>
<body>
    <h2>数据</h2>
    <button id="collapse-btn" οnclick="collapse()">
        折叠
    </button>
 
    <button id="expand-btn"  οnclick="expand()">
        展开
    </button>
 
    <button id="toggle-btn" οnclick="tog()">
        切换
    </button>
 
    <div id="json"></div>
 
    <hr />
 
</body>
</html>